<template>
	<view class="business">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="shopList"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="head_active_box flex">
			<view :class="[activeListIndex == index ? 'left_box_c' : 'left_box']" v-for="(item, index) in activeList" :key="index" @click="active(index)">
				<view :class="[activeListIndex == index ? 'active_txt' : 'txt', 'txtali']">
					<view class="flex justify-center">
						<view class="item">
							<view>{{ item.name }}</view>
							<u-badge type="error" absolute :offset="[10, -20]" :value="num" max="99" v-if="index"></u-badge>
						</view>
					</view>
				</view>
				<view class="bottom_line" v-if="activeListIndex == index">
					<image class="w100 h100" src="../../filePages/static/line.png"></image>
				</view>
			</view>
		</view>
		<view class="state_box w100 flex" v-if="activeListIndex == 0">
			<view class="list_box" v-for="(item, index) in list" :key="index" @click="onList(index)">
				<view :class="[listIndex == index ? 'list_txt' : 'list_txt_active', 's30', 'family', 'f500', 'txtali']">
					{{ item.name }}
				</view>
				<view class="list_line" v-if="listIndex == index"></view>
			</view>
		</view>
		<block v-if="activeListIndex == 1">
			<view class="follow_list_box" style="margin-top: 40upx">
				<view class="follow_list w100 flexjus" v-for="(item, index) in customList" :key="index">
					<view class="follow_left_box flex">
						<view class="follow_name s28 family f500">推荐人/{{ item.custom[0].username || '' }}&nbsp;&nbsp;{{ item.custom[1].username || '' }}</view>
					</view>
					<view class="follow_right_box flex" @click="onShenHe(item)">
						<view class="follow_txt_name s24 family f500">去审核</view>
						<view class="follow_jiantou">
							<image class="w100 h100" src="../../filePages/static/right_hui_jian.png"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="activeListIndex == 0">
			<block v-if="listIndex == 0">
				<view class="follow_list_box">
					<view class="follow_list w100 flexjus" v-for="(item, index) in customList" :key="index">
						<view class="follow_left_box flex">
							<view class="follow_icon"></view>
							<view class="follow_name s28 family f500">{{ item.custom[0].username || '' }}&nbsp;&nbsp;{{ item.custom[1].username || '' }}</view>
						</view>
						<view @click="onDistri(item.shop_id, item.id)">
							<view class="follow_right_box flex">
								<view class="uni-list-cell-left s24 family f500">选择跟进员工</view>
								<view class="follow_jiantou">
									<image class="w100 h100" src="../../filePages/static/right_hui_jian.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="listIndex == 1">
				<view class="follow_list_box">
					<view class="follow_list w100 flexjus" v-for="(item, index) in customList" :key="index">
						<view class="follow_left_box flex">
							<view class="follow_icon"></view>
							<view class="follow_name s28 family f500">{{ item.custom[0].username || '' }}&nbsp;&nbsp;{{ item.custom[1].username || '' }}</view>
						</view>
						<view class="follow_right_box flex align-center" @click="onDistri(item.shop_id, item.id, item.dispatch.nickname)">
							<view class="default_txt s24 family f500">跟进/</view>
							<view class="follow_txt_name s24 family f500">
								{{ item.dispatch.nickname || '' }}
							</view>
							<view class="follow_jiantou">
								<image class="w100 h100" src="../../filePages/static/right_hui_jian.png"></image>
							</view>
						</view>
					</view>
				</view>
			</block>
		</block>
		<view class="s30 family fblod txtali" style="margin-top: 60%" v-if="customList.length == 0">暂无数据！</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#fff',
			listIndex: 0,
			activeListIndex: 0,
			arr_index: -1,
			array: ['中国', '美国', '巴西', '日本'],
			activeList: [
				{
					name: '客户管理'
				},
				{
					name: '生效审核'
				}
			],
			list: [
				{
					name: '待跟进'
				},
				{
					name: '跟进中'
				}
			],
			customList: [],
			shopList: [],
			index: 0,
			num: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.index = obj.index;
		this.getShopList();
	},
	onShow() {
		this.getNotice();
		this.getCustomerList(6);
	},
	methods: {
		getNotice() {
			this.$request({
				url: 'manage/getnotice',
				method: 'post',
				data: {
					shop_id: this.shopId,
					type: 'customer_audit'
				}
			}).then((res) => {
				this.num = res.data.data.customer_audit;
			});
		},
		getCustomerList(type) {
			let that = this;
			this.$request({
				url: 'manage/getCustomerList',
				method: 'POST',
				data: {
					status: that.activeListIndex == 1 ? 0 : that.activeListIndex == 0 ? type : '',
					shop_id: this.shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					that.customList = res.data.data;
				}
			});
		},
		onShenHe(item) {
			uni.navigateTo({
				url: '/pages/filePages/examine/examine?id=' + item.id + '&status=' + item.status + '&shopId=' + item.shop_id
			});
		},
		onDistri(shopId, id, name) {
			uni.navigateTo({
				url: `/pages/filePages/distributeLeaflets/distributeLeaflets_two?shopId=${shopId}&id=${id}&index=${this.index}&name=${name}`
			});
		},
		bindPickerChange: function (e) {
			this.arr_index = e.detail.value;
		},
		onList(ind) {
			let type = 0;
			this.listIndex = ind;
			if (this.listIndex == 0) {
				type = 6;
			} else {
				type = 1;
			}
			this.getCustomerList(type);
		},
		active(ind) {
			this.activeListIndex = ind;
			this.getCustomerList(this.listIndex == 0 ? 6 : 1);
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.shopList = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.shopList[e].id;
			this.index = e;
			this.getCustomerList(this.listIndex == 0 ? 6 : 1);
		}
	}
};
</script>

<style scoped lang="scss">
.business {
	overflow: hidden;

	.follow_list_box {
		.follow_list {
			height: 96upx;
			border-bottom: 2upx solid #f4f4f4;
			padding: 28upx 38upx 28upx 34upx;
			box-sizing: border-box;

			.follow_right_box {
				align-items: center;
				.uni-list-cell-left {
					color: #999;
				}

				.default_txt {
					color: #844902;
				}

				.follow_txt_name {
					color: #844902;
				}

				.follow_jiantou {
					width: 12upx;
					height: 20upx;
					margin-left: 20upx;
					image {
						vertical-align: top;
					}
				}
			}

			.follow_left_box {
				.follow_icon {
					width: 38upx;
					height: 38upx;
				}

				.follow_name {
					color: #666;
					margin-top: -2upx;
					margin-left: 10upx;
				}
			}
		}
	}

	.state_box {
		height: 100upx;
		background-color: #fff;
		margin-top: 30upx;

		.list_box {
			width: 90upx;
			margin-left: 120upx;

			.list_txt {
				color: #844902;
			}

			.list_txt_active {
				color: #000;
			}

			.list_line {
				width: 37upx;
				height: 4upx;
				background-color: #844902;
				margin: 12upx auto;
			}
		}

		.list_box:first-child {
			margin-left: 32upx;
		}
	}

	.head_active_box {
		overflow: hidden;
		.left_box_c {
			width: 50%;
			height: 100upx;
			background-color: #fff;
			line-height: 100upx;
			border-radius: 0 0 0 16upx;
			.active_txt {
				font-weight: bold;
				color: #000;
			}

			.txt {
				font-weight: 500;
				color: #666;
			}

			.bottom_line {
				width: 52upx;
				height: 10upx;
				margin: 0 auto;
				margin-top: -70upx;
			}
		}
		.left_box {
			width: 50%;
			height: 100upx;
			background-color: #f4f5f9;
			line-height: 100upx;
			border-radius: 0 0 0 16upx;

			.active_txt {
				font-weight: bold;
				color: #000;
			}

			.txt {
				font-weight: 500;
				color: #666;
			}

			.bottom_line {
				width: 52upx;
				height: 10upx;
				margin: 0 auto;
				margin-top: -70upx;
			}
		}
		.item {
			position: relative;
			z-index: 1;
		}
	}
}
.tab_nav {
	background-color: #fff;
}
</style>
